<template>
    <div id="vcu-body">
        <!-- 菜单 -->
        <div id="vcu-main-menu">
            <ul class="nav nav-pills nav-stacked">
                <li><router-link to="/index">首页</router-link></li>
                <li><a>动态</a></li>
                <li><a>动态</a></li>
                <li><a>动态</a></li>
                <li><a>动态</a></li>
                <li><a>动态</a></li>
                <li><a>动态</a></li>
            </ul>
        </div>

        <!-- 主体内容 -->
        <div id="vcu-main-content">
            <div style="float:left;padding:0px 10px 10px 0px;">
                <el-row>
                    <el-button 
                        @click="closeAndOpen" 
                        circle size="medium" 
                        :icon="icon">
                    </el-button>
                </el-row>
            </div>
            <div style="float:left;padding:0px 10px 10px 0px; width:240px;">
                <!-- 搜索框 -->
                <vcu-search placeholder="搜索" 
                    @input="enter" 
                    @enter="enter"  />
            </div>
            <!-- 右侧内容显示区 -->
            <router-view />
        </div>
    </div>
</template>

<script>

export default {

    data() {
        return {
            w: 240,
            icon: 'el-icon-back',
        }
    },
    methods: {
        // 触发收起或展开菜单
        closeAndOpen(){
            if(this.w === 240) {
                this.closeMenu();
            } else if(this.w === 0) {
                this.openMenu();
            }
        },
        // 收起菜单
        closeMenu() {
            let time = setInterval(() => {
                let menu = document.getElementById('vcu-main-menu');
                if(this.w > 0) {
                    this.w -= 4;
                    menu.style.width = this.w + 'px';
                } else {
                    menu.style.display = 'none';
                    this.icon = 'el-icon-right';
                    clearInterval(time);
                }
            },3);
        },
        // 展开菜单
        openMenu() {
            let time = setInterval(() => {

                let menu = document.getElementById('vcu-main-menu');
                menu.style.display = 'block';
                if(this.w < 240) {
                    this.w += 4;
                    menu.style.width = this.w + 'px';
                } else {
                    this.icon = 'el-icon-back';
                    clearInterval(time);
                }
            },3);
        },
        enter(obj) {
            console.log(obj);
        }
    }
}
</script>

<style scoped>
#vcu-body{
    height: 100vh;
    left: 80px;
    right: 0;
    overflow: auto;
    float: left;
    position: absolute;
    min-width: 270px;
}
#vcu-main-menu{
    /* background-color: chocolate; */
    width: 240px;
    height: 100vh;
    left: 0px;
    float: left;
    overflow: auto;
    padding: 20px 10px;
    border-right: rgb(236, 228, 228) 1px solid;
}
#vcu-main-menu > ul > li {
    min-width: 120px;
}
#vcu-main-content{
    /* background-color: crimson; */
    height: 100vh;
    right: 0;
    bottom: 0;
    overflow: auto; 
    padding: 20px;
}


</style>